<template>
    <div class="new">
        <div class="newBox" v-for="(v,index) in news1arr" :key="index">
            <div class="box1">
                <img :src="v.img1" alt="">
                <div>
                    <span></span>
                    <span>{{ v.brand }}</span>
                </div>
            </div>
            <div class="box2">
                <img :src="v.img1" alt="">
                <p>{{ v.proname }}</p>
                <span>￥{{ v.originprice }}</span>
                <div>
                    <span>{{ v.category }}</span>
                    <span>已售:{{ v.sales }}</span>
                </div>
            </div>
        </div>
        <div class="box"></div>
    </div>
</template>

<script>

export default {
    data(){
        return{
            news1arr:[]
        }
    },
    props:["count"],
    mounted() {
        this.$http({
            url: "http://118.178.238.19:3001/api/pro/search",
            method: "get",
            params: {
                count: this.count,
                limitNum: 20
            }
        }).then(res => {
            this.news1arr = res.data.data
            // console.log(res.data.data);
        })
    }
}
</script>

<style scoped>
.new{
        width: 100%;
        background: #f5f5f5;
    }
    .newBox{
        width: 94%;
        height: 217px;
        padding: 5px 3%;
        display: flex;
        border-radius: 50px;
        overflow: hidden;
    }
    .box1{
        flex: 1;
        position: relative;
    }
    .box1 img{
        width: 100%;
        height: 100%;
    }

    .box1 div{
        position: absolute;
        width: 145px;
        height: 18px;
        left: 15px;
        bottom: 15px;
        display: flex;
        
    }
    .box1 div span:nth-child(1){
        width: 49.51px;
        height: 18px;
        background-image: url(https://img.alicdn.com/imgextra/i2/O1CN01zKCIXa1XFxPb7aHY7_!!6000000002895-2-tps-261-105.png);
        background-size: 49.51px 18px;
        
    }
 .box1 div span:nth-child(2) {
    width: 99.09px;
    height: 100%;
    border: 0 solid #000;
    background-color: rgba(00, 00, 00,0.5);
    border-radius: 9px;
    text-align: center;
    color: #fff;
    position: absolute;
    right: 5px;

 }
.box2 { 
    flex: 1;
    display: flex;
    flex-direction: column;
    
    background: #fff;
}
.box2 img{
    width: 108.55px;
    height: 108.55px;
    margin:10px 0 10px 34px;
}
.box2 p{
    color: 2E2E2D;
    font-size: 14px;
    font-weight: bold;
    margin:5px 0 5px 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.box2 span{
    color: 2E2E2D;
    font-size: 14px;
    font-weight: bold;
    margin: 5px 0 5px 10px;
}
.box2 div{
    width: auto;
    margin: 5px 0 5px 10px;

}
.box2 div span{
    padding: 3.5px 7px;
    border-radius: 8px;
    font-size: 12px;
    color: #B29572;
}





 .box {
     width: 100%;
     height: 60px;
 }
</style>